<script setup lang="ts">
</script>

<template>
  <div class="App">
    <!--  4.在组件中使⽤路由-->
    <!-- 声明式导航路由-->
    <router-link to="/">⾸⻚</router-link>
    |
    <router-link to="/about">关于</router-link>
    |
    <!-- 1.查询参数 (Query Parameters)-->
    <!-- ⽅式⼀：to字符串写法 -->
    <router-link to="/search?keyword=python&page=1">搜索1</router-link>
     |
    <!--⽅式⼆：to对象写法（推荐） -->
    <router-link :to="{
       path: '/search',
       query: {
         keyword: 'java',
         page: 2
       }
    }">搜索2</router-link>|
    <!-- 2. 动态路由参数 (Params)-->
    <!-- ⽅式⼀：to字符串写法 -->
    <router-link to="/search2/python3/3">搜索3</router-link>
     |
    <!--⽅式⼆：to对象写法（推荐） -->
    <router-link :to="{
       name: 'search2',
       params: {
         keyword: 'java3',
         page: 3
       }
    }">搜索4</router-link>


  </div>
  <!--  路由渲染-->
  <router-view/>
</template>

<style scoped></style>
